<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Twritter.css">
<title>Twritter</title>
<script type="text/javascript" language="javascript" src="twritter/twritter.nocache.js"></script>
</head>

<body>

	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
	<noscript>
		<div
			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
			Your web browser must have JavaScript enabled in order for this
			application to display correctly.</div>
	</noscript>
	
	<h1 class="title">Twritter!</h1>
	<h3 class="title">Mejorando tus recorridos</h3>
	
	<div class='main'>	
		<div id="tuits">
		
			<script type="text/javascript">
			var callRPC = function(tweet) {
				// se sobreescribe dede java para parsear el tweet automaticamente
			}
			var copyTweet = function(tweet) {
				// se sobreescribe desde java para copiar el texto del tweet a la consola de debuggeo
			}
			</script>
			<script src="widget.js"></script>
			<script>
			new TWTR.Widget({
			  version: 2,
			  type: 'list',
			  rpp: 30,
			  interval: 30000,
			  title: 'Twritter accounts for',
			  subject: 'the twritter project',
			  width: 250,
			  height: 410,
			  theme: {
			    shell: {
			      background: '#216965',
			      color: '#ffffff'
			    },
			    tweets: {
			      background: '#ffffff',
			      color: '#444444',
			      links: '#b740c2'
			    }
			  },
			  features: {
			    scrollbar: true,
			    loop: false,
			    live: true,
			    behavior: 'all'
			  },
			  
			  
			}).render().setList('FnzMtz', 'trafico').start();
			</script>
		
		</div>
		<div id='cm-example'></div>
		<div id='right'></div>
	</div>
	
	<script type="text/javascript"
		src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
	<script type="text/javascript">
	
		var map = new CM.Map('cm-example', new CM.Tiles.CloudMade.Web({
			key : '8ee2a50541944fb9bcedded5165f09d9'
		}));
		map.setCenter(new CM.LatLng(19.433116, -99.132954), 12);
		
		var position = new CM.ControlPosition(CM.TOP_RIGHT, new CM.Size(10, 10));
		//map.addControl(new CM.SmallMapControl(), position);
		var myControl = new CM.LargeMapControl();
		map.addControl(myControl);
		
	
		function toLatLng(lat, lon) {
			return new CM.LatLng(lat, lon);
		}

		function drawPolygon(latlngs, color, autor, texto, hora) {
			var polyline = new CM.Polyline(latlngs, color, 8, 1);
			map.addOverlay(polyline);
			CM.Event.addListener(polyline, 'click', function(coordenadas) {
				map.openInfoWindow(coordenadas, "<p>" + autor + " a las " + hora + " dijo:<br/>" + texto + "</p>");
			});
		}
		
		function drawMarkerAtMyPosition(latlng) {
			var options = {
   				icon: CM.DEFAULT_ICON,
   				title: "Mi posición"   				
			}
			var marker = new CM.Marker(latlng,options);			
			map.setCenter(latlng, 12);
			map.addOverlay(marker);
		}
		
	</script>

</body>
</html>
